<template>
<view>
    <!-- 添加遮罩层 -->
    <view 
      class="keyboard-mask" 
      v-show="show"
      @click="handleMaskClick"
    ></view>
    <view class="keyboard-container" :class="{'keyboard-visible': show}">
    <view class="keyboard-row" v-for="(row, rowIndex) in keyLayout" :key="rowIndex">
      <view 
        class="keyboard-key" 
        v-for="key in row" 
        :key="key"
        @click="handleKeyPress(key)"
        :class="{'key-id': key === 'X', 'key-backspace': key === '删除'}"
      >
        <!-- <u-icon v-if="key === '删除'" name="arrow-left" style="color: #fff;"  color="#fff" size="28"></u-icon> -->
        <text>{{ key }}</text>
      </view>
    </view>
  </view></view>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      keyLayout: [
        ['1', '2', '3'],
        ['4', '5', '6'],
        ['7', '8', '9'],
        ['0','X', '删除']
      ]
    }
  },
  methods: {
    handleKeyPress(key) {
      this.$emit('keypress', key);
    },
    handleMaskClick() {
      this.$emit('close');
    }
  }
}
</script>

<style lang="scss">
.keyboard-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 998;
}

.keyboard-container {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  background-color: #f5f5f5;
  padding: 8px 0;  // 减少上下内边距
  transition: bottom 0.3s ease;
  z-index: 999; // 确保键盘在遮罩层上方
  max-height: 40vh;  // 限制最大高度
  overflow: hidden;
  
  &.keyboard-visible {
    bottom: 0;
  }
}

.keyboard-row {
  display: flex;
  justify-content: center;
  margin-bottom: 6px;  // 减少行间距
}

.keyboard-key {
  width: 20%;  // 减小按键宽度
  height: 45px;  // 减小按键高度
  margin: 0 1%;
  background-color: #fff;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;  // 减小字体大小
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  
  &:active {
    background-color: #e0e0e0;
  }
  
  &.key-id {
    background-color: #1890ff;
    color: white;
  }
  
  &.key-backspace {
    background-color: #ff4d4f;
    color: white;
  }
}

/* 适配不同平板尺寸 */
@media (min-width: 600px) and (max-width: 800px) {
  .keyboard-key {
    height: 50px;
    font-size: 20px;
  }
}

@media (min-width: 800px) {
  .keyboard-key {
    height: 55px;
    font-size: 22px;
    max-width: 120px;
  }
}

/* 横屏适配 */
@media screen and (orientation: landscape) {
  .keyboard-container {
    max-height: 60vh; // 横屏时增加高度
    padding: 5px 0;
  }

  .keyboard-row {
    margin-bottom: 4px;
  }

  .keyboard-key {
    height: 40px;
    font-size: 16px;
  }
}

/* 横屏且小屏幕适配 */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .keyboard-container {
    max-height: 70vh;
  }
  
  .keyboard-key {
    height: 35px;
    font-size: 14px;
  }
}

/* 横屏平板适配 */
@media screen and (orientation: landscape) and (min-width: 800px) {
  .keyboard-key {
    height: 50px;
    font-size: 20px;
    max-width: 100px;
  }
}
</style>